<template>
  <a-pagination
      v-model:current="current"
      v-model:total="total"
      v-model:page-size="size"
      :page-size-options="pageSizeOptions"
      show-size-changer
      show-less-items
      show-quick-jumper
      @change="handlerPageChange"
      @showSizeChange="handlerPageShowSizeChange"/>
</template>

<script>
import {ref} from "vue";

export default {
  name: "mine-pagination",
  props: {
    current: {
      type: Number,
      required: false,
      default: ref(1)
    },
    size: {
      type: Number,
      required: false,
      default: ref(10)
    },
    total: {
      type: Number,
      required: false,
      default: ref(0)
    }
  },
  setup(props, context) {
    const pageSizeOptions = ref(['2', '10', '20', '30', '40'])

    const initTableData = () => {
      context.emit("initTableData", {current: props.current, size: props.size})
    }

    const handlerPageChange = (page, pageSize) => {
      props.current= page
      initTableData()
    }

    const handlerPageShowSizeChange = (current, pageSize) => {
      props.size= pageSize
      initTableData()
    }
    return {
      pageSizeOptions,
      handlerPageChange,
      handlerPageShowSizeChange,
      initTableData
    }
  }
}
</script>

<style scoped>

</style>
